<template>
    <a-card style="margin-bottom: 10px">
        <a-form
            layout="inline"
            :model="formState"
            @finish="handleFinish"
            @finishFailed="handleFinishFailed"
        >
            <a-form-item label="业务类型：">
                <a-select
                    v-model:value="formState.ywlxid"
                    style="width: 200px"
                    :filter-option="filterOption"
                    show-search
                >
                    <a-select-option v-for="d in ryxx" :key="d.dictValue">
                        {{ d.dictLabel }}
                    </a-select-option>
                </a-select>
            </a-form-item>
            <a-form-item label="数据表名：">
                <a-input v-model:value="formState.sjdxmc"></a-input>
            </a-form-item>
            <a-form-item label="数据表中文名：">
                <a-input v-model:value="formState.sjdxms"></a-input>
            </a-form-item>
            <a-form-item>
                <a-button
                    type="primary"
                    @click="handleFinish"
                    style="margin-right: 4px"
                >
                    <template #icon><SearchOutlined /></template>
                    搜索
                </a-button>
                <a-button @click="handleReset">
                    <template #icon><ReloadOutlined /></template>
                    重置
                </a-button>
            </a-form-item>
        </a-form>
    </a-card>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, computed } from "vue";
import { SearchOutlined, ReloadOutlined } from "@ant-design/icons-vue";
import { useStore } from "@/store";
export default defineComponent({
    name: "AddressMatch",
    props: {
        formState: {
            type: Object,
        },
    },
    setup(props, { emit }) {
        const dictionaryStore = useStore();
        const { formState }: any = toRefs(props);
        const state = reactive({
            handleFinish: () => {
                emit("searchData", {
                    formState: formState.value,
                });
            },
            handleFinishFailed: () => {
                console.log(formState);
            },
            handleReset: () => {
                formState.value.ywlxid = "";
                formState.value.sjdxmc = "";
                formState.value.sjdxms = "";
            },
            filterOption: (input: string, option: any) => {
                return (
                    option.children[0].children
                        .toLowerCase()
                        .indexOf(input.toLowerCase()) >= 0
                );
            },
        });
        const ryxx = computed(() => {
            return dictionaryStore.state.ryxx;
        });
        return {
            ryxx,
            ...toRefs(state),
            ...toRefs(props),
        };
    },
    components: {
        SearchOutlined,
        ReloadOutlined,
    },
});
</script>